<template>
    <div class="app-container">
        <!-- 顶部导航部分 -->
        <!-- start header -->
        <mt-header fixed title="Vue实战项目">
            <div @click="clickBack" slot="left" v-show="flag">
                <mt-button icon="back">返回</mt-button>
            </div>
        </mt-header>
        <!--end header-->
        <!-- router-view -->
        <transition>
            <router-view></router-view>
        </transition>


        <!--  底部切换的导航栏 -->
        <!-- start tabbar -->
        <div>
            <nav class="mui-bar mui-bar-tab">
                <router-link class="mui-tab-item-test" to="/home">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页</span>
                </router-link>
                <router-link class="mui-tab-item-test" to="/member">
                    <span class="mui-icon mui-icon-contact"></span>
                    <span class="mui-tab-label">会员</span>
                </router-link>
                <router-link class="mui-tab-item-test" to="/shopcart">
                    <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge" id="cart">{{ $store.getters.countCart }}</span></span>
                    <span class="mui-tab-label">购物车</span>
                </router-link>
                <router-link class="mui-tab-item-test" to="/search">
                    <span class="mui-icon mui-icon-search"></span>
                    <span class="mui-tab-label">搜索</span>
                </router-link>
            </nav>
        </div>
        <!-- end tabbar -->


    </div>
</template>
<script>
    export default {
        data() {
            return {
                //  页面一进入的时候，就不显示这个组件
                flag: false
            }
        },
        methods: {
            clickBack() {
                this.$router.back()
            }
        },
        created() {
            //    在页面一加载的时候，就进行路由判断
            //    以免出现刷新页面后，因为路由没有改变，而返回按钮消失的情况
            this.flag = this.$route.path === '/home' ? false : true
        },
        watch: { // 使用watch监听路由的改变情况
            //watch存放的是对象，因为key比较特殊，所以需要加上引号
            // 其一般有2个参数，分别为newVal和oldVal
            "$route.path": function (newVal) {
                if (newVal === '/home') {
                    this.flag = false
                } else {
                    this.flag = true
                }
            }

        }
    }

</script>
<style scoped lang="less">
    .app-container {
        padding-top: 40px;
        padding-bottom: 50px;
        /*
            因为页面加载的时候，组件还没有进入的时候，就已经作为页面的一部分了
            所以此时页面宽度会变宽，可能会出现水平滚动条的情况，所以需要溢出隐藏

            不要 overflow 因为y轴是不可以隐藏的，如果隐藏了，那么就没有垂直滚动条了
            在显示一些需要滚动的信息时，就无法正常使用了（例如：新闻列表）
        */
        overflow-x: hidden;


        .mint-header.is-fixed {
            z-index: 100;
        }

    }

    .v-enter {
        opacity: 0;
        /*
            因为组件的宽度正好和设备的宽度一致
         */
        transform: translateX(100%);
    }

    .v-leave-to {
        opacity: 0;
        /*
            因为离开的位置和进入的位置不在一样了
            所以需要分开设置
        */
        transform: translateX(-100%);
        /*
            在离开的时候，设置离开的页面定位或者定位
            此时就会导致离开的页面脱离了标准流
            这样就可以避免进入的页面由下往上进入了

            进入页面 由下往上进入的原因是：
                在动画执行的某一个瞬间
                进入和离开动画都在页面中，
                所以此时后一个组件就会被显示在前一个组件下面
                随着动画的执行，上面的组件离开页面
                此时下面的页面就上来了
        */
        position: absolute;

    }

    .v-leave-active,
    .v-enter-active {
        transition: all 0.8s ease;
    }


    .mui-bar-tab .mui-tab-item-test.mui-active {
        color: #007aff;
    }

    .mui-bar-tab .mui-tab-item-test {
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
    }

    .mui-bar-tab .mui-tab-item-test .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .mui-bar-tab .mui-tab-item-test .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .mui-bar-tab .mui-tab-item-test .mui-icon ~ .mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>